<style lang="scss">
    @import '~@/scss/public.scss';
    .scoped-caijinbao{
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 250px;
            margin: 0;
        }
    
        .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
        }
    
        .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
        }
    
        .search-list{
            position: absolute;
            top: 41px;
            background: #fff;
            width: 100%;
            z-index: 1;
            padding: 15px 0 30px;
            .el-checkbox-button{
                margin-top: -1px;
                margin-left: -1px;
                &.is-checked .el-checkbox-button__inner{
                    background-color:transparent;
                    color:#ff8000;
                    box-shadow: none;
                    z-index: 1;
                    border-left-color: #ff8000;
                    position: relative;
                    &::after{
                        content: '';
                        background: url('~@/icons/select.png') no-repeat center;
                        background-size: cover;
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                }
            }
            .el-checkbox-button__inner{
                display: block;
                width: 100px;
                border-left: 1px solid rgb(217, 207, 191);
                border-radius: 0;
                font-size: 12px;
            }
            .el-input{
                width: 100px;
            }
        }

        .el-input-group__append{
            width: 135px;
        }

    }

</style>
<template>
<ui-main v-loading="couponListLoading" class="scoped-caijinbao">
    
    <!-- 菜单 -->
    <div class="ui-header">
        <div class="flex col-center row-center">
            <el-tabs v-model="couponTab" class="flex column column-col-bottom mr30 border-none">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane v-for="item in couponList" :key="item.title" :label="item.title" :name="item.title"></el-tab-pane>
            </el-tabs>
            <div class="mr30">
                <el-input v-model="search.keyword" placeholder="挖掘全网彩金" size="small" style="width:300px;opacity:.9;">
                    <el-button-group slot="append">
                        <el-tooltip :open-delay="1000" effect="dark" content="搜索" placement="bottom-start">
                            <el-button @click="refashCouponList" style="border-right: 1px solid #eee;"><i class="el-icon-search"></i></el-button>
                        </el-tooltip>
                        <el-tooltip :open-delay="1000" effect="dark" content="清空" placement="bottom-start">
                            <el-button @click="search.keyword=''" style="border-right: 1px solid #eee;"><i class="el-icon-delete2"></i></el-button>
                        </el-tooltip>
                        <el-tooltip :open-delay="1000" effect="dark" content="筛选查询" placement="bottom-start">
                            <el-button @click="toggleSearchList"><icon name="list-ul" scale=".8"></icon></el-button>
                        </el-tooltip>
                    </el-button-group>
                </el-input>
            </div>
        </div>
        <!-- 高级筛选列表 -->
        <transition name="slide-col">
            <div v-show="searchListActive" class="search-list">
                <div style="width:600px" class="auto-center">
                    <p>优惠券类型</p>
                    <el-checkbox-group v-model="search.couponType">
                        <el-checkbox-button label="1">白菜</el-checkbox-button>
                        <el-checkbox-button label="2,3">存送</el-checkbox-button>
                    </el-checkbox-group>
                    <p class="mt20">游戏类型</p>
                    <el-checkbox-group v-model="search.gameType">
                        <el-checkbox-button v-for="item in search.gameTypeOpt" :key="item.id" :label="item.id">{{item.name}}</el-checkbox-button>
                    </el-checkbox-group>
                    <p class="mt20">领取要求</p>
                    <el-checkbox-group v-model="search.couponRequest">
                        <el-checkbox-button v-for="item in search.couponRequestOpt" :key="item.id" :label="item.id">{{item.name}}</el-checkbox-button>
                    </el-checkbox-group>
                    <p class="mt20">流水偏好</p>
                    <div>
                        <el-input v-model="search.multiple.min" type="number" min="0" max="200" placeholder="最低0"></el-input>
                        <span> - </span>
                        <el-input v-model="search.multiple.max" type="number" min="0" max="200" placeholder="最高200"></el-input>
                    </div>
                    <p class="mt20">存款偏好</p>
                    <div>
                        <el-input v-model="search.amount.min" type="number" min="0" placeholder="最低0"></el-input>
                        <span> - </span>
                        <el-input v-model="search.amount.max" type="number" min="0" placeholder="最高不限"></el-input>
                    </div>
                    <div class="flex row-end mt20 pt20 ui-border-top">
                        <el-button @click="reset" size="small">重置</el-button>
                        <el-button @click="toggleSearchList" type="primary" size="small">确认</el-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>

    <!-- main -->
    <div @click="closeSearchList" class="flex mt50">
        <!-- 左侧彩金区域 -->
        <div style="width:800px">
            <!-- banner -->
            <el-carousel v-show="couponTab=='all'" indicator-position="outside" height="250px">
                <el-carousel-item v-for="item in swipedata" :key="item.slide_id">
                    <a :href="item.slide_url" target="_blank">
                        <ui-img :url="item.slide_pic" style="width:100%;height:100%;"></ui-img>
                    </a>
                </el-carousel-item>
            </el-carousel>

            <!-- 分类彩金列表 -->
            <div>
                <div v-if="couponTab=='all'" v-for="list in couponList"  :key="list.title" class="p15 pr0" >
                    <ui-title v-once>{{list.title}}</ui-title>
                    <div class="flex flex-wrap">
                        <coupon v-if="i<6" v-for="(item,i) in list.data" :key="item.id" :color="list.color" :data="item" @click.native="linkCouponDeatils(item.id)" style="width:47%" class="ml15"></coupon>
                    </div>
                </div>
                <div v-if="couponTab!='all' && list.title==couponTab" v-for="list in couponList" :key="list.title" class="p15 pr0" >
                    <ui-title v-once>{{list.title}}</ui-title>
                    <div class="flex flex-wrap">
                        <coupon v-for="item in list.data" :key="item.id" :color="list.color" :data="item" @click.native="linkCouponDeatils(item.id)" style="width:47%" class="ml15"></coupon>
                    </div>
                </div>
                <div class="flex row-center mb20">
                    <el-pagination 
                        v-if="couponTab!=='all'"
                        @current-change="refashCouponList"
                        :current-page.sync="currentCouponListPage"
                        :page-size="couponListPageSize"
                        layout="prev, pager, next, jumper"
                        :total="couponListTotal">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 右侧纵向菜单 -->
        <right-navbar></right-navbar>
    </div>
    
</ui-main>
</template>

<script>
import rightNavbar from './右侧导航'
import coupon from '@/views/coupon'
export default {
    components: {
        coupon,
        rightNavbar
    },
    data() {
        return {
            couponTab:'all',
            couponListPublish:{},
            couponList:[
                { title:'最新白菜', color:'#3db96d', coupon_type:'1', },
                { title:'最新上市', color:'#ffa500', },
                { title:'提款最多', color:'#20a0ff', order_field: 'withdraw_num', },
                { title:'流水最低', color:'#d9534f', order_field: 'multiple', order_type:'asc', },
            ],
            swipedata:[],
            couponListLoading:false,
            currentCouponListPage:1,
            couponListPageSize:30,
            couponListTotal:0,
            searchListActive:false,//是否激活高级筛选
            search:{
                keyword: '',
                couponType: [],
                gameType: [],
                gameTypeOpt: [],
                couponRequest: [],
                couponRequestOpt: [],
                // 流水偏好
                multiple: {
                    min: '',
                    max: ''
                },
                // 存款偏好
                amount: {
                    min: '',
                    max: ''
                }
            }
        }
    },
    created () {
        // 加载彩金列表
        this.refashCouponList()

        // 轮播图
        this.$http.get('index.php?g=home&m=slide&a=slide_list',{
            params:{
                cat_idname: 'coupon_index_pc'
            }
        }).then(({data}) => {
            // console.log('轮播图:', data);
            this.swipedata = data.data
        })

        // 筛选------
        this.$http.get(`index.php?g=home&m=GameType&a=type_list`)
        .then(({data}) => {
            // console.log('游戏类型:', data);
            if (data.code==1) {
                this.search.gameTypeOpt = data.data
            }
        })
        this.$http.get(`index.php?g=home&m=DictItem&a=get_items`,{
            params:{
                nid: 'coupon_request'
            }
        }).then(({data}) => {
            // console.log('领取要求', data);
            if (data.code==1) {
                this.search.couponRequestOpt = data.data
            }
        })
    },
    methods: {
        loadCouponList(item){//加载指定类型的彩金数据
            let search_field = ''
            let search_value = ''

            // 获取搜索框中的查询字段
            if (this.search.keyword) {
                search_field += 'name|'
                search_value += `${this.search.keyword}|`
            }

            // 存送类型
            if (this.search.couponType.length>0) {
                search_field += 'coupon_type|'
                search_value += `${this.search.couponType}|`
            }

            // 游戏类型
            if (this.search.gameType.length>0) {
                search_field += 'game_type|'
                search_value += `${this.search.gameType}|`
            }

            // 领取要求
            if (this.search.couponRequest.length>0) {
                search_field += 'coupon_request|'
                search_value += `${this.search.couponRequest}|`
            }

            // 流水偏好
            if (this.search.multiple.min || this.search.multiple.max) {
                search_field += 'multiple|'
                search_value += `${this.search.multiple.min},${this.search.multiple.max}|`
            }

            // 存款偏好
            if (this.search.amount.min || this.search.amount.max) {
                search_field += 'amount|'
                search_value += `${this.search.amount.min},${this.search.amount.max}|`
            }

            // 去掉最后多余的|分隔符
            search_field = search_field.replace(/\|$/,'')
            search_value = search_value.replace(/\|$/,'')

            this.couponListLoading = true
            this.$http.get('index.php?g=home&m=GameCoupon&a=coupon_list', {
                params:{
                    page_size: this.couponListPageSize,
                    page_no: this.currentCouponListPage,
                    order_field: item.order_field,
                    search_field:search_field,
                    search_value:search_value
                }
            })
            .then(({data})=>{
                if (data.code===1) {
                    this.$set(item, 'data', data.data)
                    this.couponListLoading = false
                    this.couponListTotal = data.total
                }
            }).catch(() => {
                this.couponListLoading = false
            })
        },
        refashCouponList(){//刷新当前类型彩金数据
            this.couponList.forEach((item)=>{
                if (this.couponTab==='all' || item.title === this.couponTab) {
                    this.loadCouponList(item)
                }
            })
        },
        toggleSearchList(e){
            e.stopPropagation()
            this.searchListActive=!this.searchListActive

            // 关闭时更新数据
            if (!this.searchListActive) {
                this.refashCouponList()
            }
        },
        linkCouponDeatils(id){
            this.$router.push({
                name:'彩金详情',
                query:{
                    id:id
                }
            })
        },
        reset(){
            this.search.keyword=''
            this.search.couponType = []
            this.search.gameType = []
            this.search.couponRequest = []
            this.search.multiple.min = ''
            this.search.multiple.max = ''
            this.search.amount.min = ''
            this.search.amount.max = ''
        },
        closeSearchList(){
            this.searchListActive =false
        }
    },
}
</script>